@model IEnumerable<PocketPals.Models.Transaction>

@{
    ViewData["Title"] = "交易记录";
    var currentBalance = ViewBag.CurrentBalance ?? 0m; // 从 ViewBag 获取余额，如果为 null 则默认为 0
}

<div class="container mt-4">
    @* Modified this section for correct alignment *@
    <div class="d-flex justify-content-between align-items-center mb-4">
        @* Group title and home button together *@
        <div class="d-flex align-items-center gap-3">
            <h1 class="mb-0"><i class="fas fa-list-alt me-2"></i>交易记录</h1>
            <a asp-controller="Home" asp-action="Index" class="btn btn-secondary">
                <i class="fas fa-home me-1"></i>返回首页
            </a>
        </div>
        @* Moved the Add button outside the group to be pushed to the right *@
        <a asp-action="Create" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>添加记录
        </a>
    </div>

    @* 添加显示当前余额的卡片 *@
    <div class="card shadow-sm mb-4">
        <div class="card-body text-center">
            <h5 class="card-title text-muted mb-2">当前余额</h5>
            <p class="card-text display-6 fw-bold text-primary">¥ @currentBalance.ToString("N2")</p>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            @if (Model.Any())
            {
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th><i class="far fa-calendar-alt me-1"></i>时间</th>
                                <th class="text-center"><i class="fas fa-exchange-alt me-1"></i>类型</th>
                                <th class="text-end pe-3"><i class="fas fa-dollar-sign me-1"></i>金额</th> @* <-- Added pe-3 for padding *@
                                <th><i class="far fa-comment-dots me-1"></i>描述</th>
                                <th class="text-center"><i class="fas fa-cogs me-1"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr>
                                    <td>@item.TransactionTime.ToString("yyyy-MM-dd HH:mm")</td>
                                    <td class="text-center">
                                        @if (item.Type == TransactionType.Income)
                                        {
                                            <span class="badge bg-success" title="收入"><i class="fas fa-arrow-up"></i> 收入</span>
                                        }
                                        else
                                        {
                                            <span class="badge bg-danger" title="支出"><i class="fas fa-arrow-down"></i> 支出</span>
                                        }
                                    </td>
                                    <td class="text-end pe-3"> @* <-- Added pe-3 for padding *@
                                        @if (item.Type == TransactionType.Income)
                                        {
                                            <span class="text-success fw-bold">+@item.Amount.ToString("N2")</span>
                                        }
                                        else
                                        {
                                            <span class="text-danger fw-bold">-@item.Amount.ToString("N2")</span>
                                        }
                                    </td>
                                    <td>@item.Description</td>
                                    <td class="text-center">
                                        <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-info me-1" title="详情"><i class="fas fa-eye"></i></a>
                                        @* 未来可以添加编辑和删除按钮 *@
                                        @*
                                        <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-warning me-1" title="编辑"><i class="fas fa-edit"></i></a>
                                        <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-danger" title="删除"><i class="fas fa-trash-alt"></i></a>
                                        *@
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
            else
            {
                <div class="alert alert-info text-center">
                    <i class="fas fa-info-circle me-2"></i>暂无交易记录，请点击 "添加新交易" 按钮创建。
                </div>
            }
        </div>
    </div>
</div>

@* 如果需要，可以在这里添加一些自定义 CSS *@
<style>
    /* Removed white-space: nowrap; from th */
    .table th {
        white-space: nowrap;
    }
    .table td {
        vertical-align: middle;
    }
    .badge {
        font-size: 0.85em;
        padding: 0.4em 0.6em;
    }
</style>